<template>
    <div>
      <div class="tool-box">
        <el-button size="mini" :type="isDrawing ? 'warning' : 'primary'" @click="startDraw">绘制区域</el-button>
   
        <el-button size="mini"  type="danger" :disabled="isDrawing" @click="clearAll">全部清除</el-button>
        <el-button size="mini"  type="success" :disabled="isDrawing" @click="savePoints">保存</el-button>
      </div>
      <div class="canvas-wrap">
        <canvas id="imgCanvas" ref="canvaxbox"></canvas>
        <!--用来和鼠标进行交互操作的canvas-->
        <canvas id="drawCanvas" ref="canvas" :style="{cursor: isDrawing?'crosshair': 'default'}"> </canvas>
        <!--存储已生成的点线，避免被清空-->
        <canvas id="saveCanvas" ref="canvasSave"></canvas>
      </div>
    </div>
    
  </template>
  <script>
  // import OldJs from './oldJs.js'
  export default {
    // mixins: [OldJs],
    data() {
      return {
        imgUrl: 'img/code/wechat-code.jpg',
        isDrawing: false, // 是否正在绘制
        ratio: 1,
        imgWidth: 3020,
        imgHeight: 1080,
        wrapWidth: 300,
        wrapHeight: 300,
        canvasWidth: 300,
        canvasHeight: 300,
        drawingPoints: [],
        drawedPoints: [],
        imgCanvas: null,
        imgCtx: null,
        drawCanvas: null,
        drawCtx: null,
        saveCanvas: null,
        saveCtx: null,
        submitData: [
          // {"polygon":{"x1":0,"y1":0,"x2":1920,"y2":0,"x3":1920,"y3":1080,"x4":0,"y4":1080}},
        //   {"polygon":{"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354}},
          {"polygon":{"x1":0,"y1":32,"x2":183,"y2":35,"x3":181,"y3":100,"x4":55,"y4":97}},
        //   {"polygon":{"x1":433,"y1":250,"x2":706,"y2":253,"x3":707,"y3":392,"x4":435,"y4":393}},
        //   {"polygon":{"x1":45,"y1":539,"x2":193,"y2":538,"x3":192,"y3":622,"x4":41,"y4":623,"x5":42,"y5":623}}
        ]
        // [
        //   {"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354}}
        // ]
      }
    },
    mounted() {
      this.initCanvas()
      this.getImage()
    },
    methods: {
      initCanvas() { // 初始化canvas画布
   
        let canvasWrap = document.getElementsByClassName('canvas-wrap')
        this.wrapWidth = canvasWrap [0].clientWidth
        this.wrapHeight = canvasWrap [0].clientHeight
   
        this.imgCanvas = document.getElementById('imgCanvas')
        this.imgCtx = imgCanvas.getContext('2d')
   
        // 绘制canvas
        this.drawCanvas = document.getElementById('drawCanvas')
        this.drawCtx = drawCanvas.getContext('2d')
   
        // 保存绘制区域 saveCanvas
        this.saveCanvas = document.getElementById('saveCanvas')
        this.saveCtx = saveCanvas.getContext('2d')
        // this.initImgCanvas()
      },
      initImgCanvas() {
        // 计算宽高比
        let ww = this.wrapWidth // 画布宽度
        let wh = this.wrapHeight // 画布高度
        let iw = this.imgWidth // 图片宽度
        let ih = this.imgHeight // 图片高度

        // if (iw/ih < ww/wh) { // 以高为主
        //     this.ratio = ih / wh
        //     this.canvasHeight = wh
        //     this.canvasWidth = wh * iw/ih
        // } else { // 以宽为主
        //     this.ratio = iw / ww
        //     this.canvasWidth = ww
        //     this.canvasHeight = ww * ih/iw
        // }

        // 图片加载绘制
        let img = new Image()
        // let img = document.createElement('img')
        img.src =  this.imgUrl
   
        img.onload = () => {
            console.log('图片已加载')
            this.canvasWidth = img.width // 图片宽度
            this.canvasHeight = img.height // 图片高度

            // 初始化画布大小
            imgCanvas.width = this.canvasWidth
            imgCanvas.height = this.canvasHeight
            drawCanvas.width = this.canvasWidth
            drawCanvas.height = this.canvasHeight
            saveCanvas.width = this.canvasWidth
            saveCanvas.height = this.canvasHeight
            this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight)
            this.renderDatas() // 渲染原有数据
        }
      },
      startDraw() { // 绘制区域
        if (this.isDrawing) {
            return
        }
        this.isDrawing = true
        // 绘制逻辑
        drawCanvas.addEventListener("click", this.drawImageClickFn)
        drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn)
        drawCanvas.addEventListener("mousemove", this.drawImageMoveFn)
      },
      clearAll() { // 清空所有绘制区域
        this.saveCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.drawedPoints = []
      },
      getImage() { // 请求图片
        // axios.post('/dsj/screenshot/', {
        //   "source":"rtsp://admin:admin12345@10.10.42.251:554/cam/realmonitor?channel=1&subtype=0"
        // }).then(res => {
        //   this.imgUrl = res.data.img
        //   this.imgWidth = res.data.width
        //   this.imgHeight = res.data.height
        //   this.imgUrl && this.initImgCanvas()
        // })
        
        setTimeout(() => {
            this.imgUrl = 'https://ts1.cn.mm.bing.net/th/id/R-C.774b9223b5a3526c61691fcc5ecb3145?rik=i7Rvf49CF7Zc4w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50041%2f7432.jpg_wh1200.jpg&ehk=969PSODhgWgR359dXTJbOB4maXRx3XZ536jGL%2fUyUy0%3d&risl=&pid=ImgRaw&r=0'
            // this.imgWidth = 500
            // this.imgHeight = 500
            this.imgUrl && this.initImgCanvas()
        }, 500)
      },
      drawImageClickFn(e) {
        let drawCtx = this.drawCtx
        if (e.offsetX || e.layerX) {
          let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
          let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
          let lastPoint = this.drawingPoints[this.drawingPoints.length-1] || []
          if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
            this.drawingPoints.push([pointX, pointY])
          }
        }
      },
      drawImageMoveFn(e) {
        let drawCtx = this.drawCtx
        if (e.offsetX || e.layerX) {
          let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
          let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
          // 绘制
          drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
   
          // 绘制点
          drawCtx.fillStyle = 'blue'
          this.drawingPoints.forEach((item, i) => {
            drawCtx.beginPath();
            drawCtx.arc(...item, 6, 0, 180)
            drawCtx.fill(); //填充
          })
   
          // 绘制动态区域
          drawCtx.save()
          drawCtx.beginPath();
          this.drawingPoints.forEach((item, i) => {
            drawCtx.lineTo(...item)
          })
          drawCtx.lineTo(pointX, pointY)
          drawCtx.lineWidth = "3";
          drawCtx.strokeStyle= "blue";
          drawCtx.fillStyle = 'rgba(255, 0, 0, 0.3)'
          drawCtx.stroke();
          drawCtx.fill(); //填充
          drawCtx.restore()
        }
      },
      drawImageDblClickFn(e) {
        let drawCtx = this.drawCtx
        let saveCtx = this.saveCtx
        if (e.offsetX || e.layerX) {
          let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
          let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
          let lastPoint = this.drawingPoints[this.drawingPoints.length-1] || []
          if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
            this.drawingPoints.push([pointX, pointY])
          }
        }
        // 清空绘制图层
        drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        // 绘制区域至保存图层
        this.drawSaveArea(this.drawingPoints)
   
        this.drawedPoints.push(this.drawingPoints)
        this.drawingPoints = []
        this.isDrawing = false
   
        // 绘制结束逻辑
        drawCanvas.removeEventListener("click", this.drawImageClickFn)
        drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn)
        drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn)
      },
      drawSaveArea(points) {
        if(!points instanceof Array || points.length === 0) return
        this.saveCtx.save()
        this.saveCtx.beginPath();
        points.forEach((item, i) => {
          this.saveCtx.lineTo(...item)
        })
        this.saveCtx.closePath()
        this.saveCtx.lineWidth="2";
        this.saveCtx.fillStyle = 'rgba(255,0, 255, 0.3)'
        this.saveCtx.strokeStyle= "red";
        this.saveCtx.stroke();
        this.saveCtx.fill(); //填充
        this.saveCtx.restore()
      },
   
      savePoints() { // 将画布坐标数据转换成提交数据
        let objectPoints = []
        // "object": [{"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354} }]
        objectPoints = this.drawedPoints.map(area => {
          let polygon = {}
          area.forEach((point, i) => {
            polygon[`x${i+1}`] = Math.round(point[0] * this.ratio)
            polygon[`y${i+1}`] = Math.round(point[1] * this.ratio)
          })
          return {
            "polygon": polygon
          }
        })
        this.submitData = objectPoints
        console.log('最终提交数据', objectPoints)
      },
      renderDatas() { // 将提交数据数据转换成画布坐标
        this.drawedPoints = this.submitData.map(item => {
          let polygon = item.polygon
          let points = []
          for(let i=1; i< Object.keys(polygon).length/2 + 1; i++) {
            if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
              points.push([polygon[`x${i}`]/this.ratio, polygon[`y${i}`]/this.ratio])
            }
          }
          this.drawSaveArea(points)
          return points
        })
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .tool-box {
    position: absolute;
    top: 0;
    width: 90vw;
    height: 40px;
    padding: 5px 30px;
    margin: 0 auto 0;
    box-sizing: border-box;
    text-align: right;
    z-index: 999;
  }
  .canvas-wrap {
    // width: 80vw;
    // height: 45vw;
    width: 100vw;
    height: 100vh;
    background-color: #000;//#fff;
    position: relative;
  }
  #imgCanvas, #drawCanvas, #saveCanvas {
    background: rgba(255, 0, 255, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #drawCanvas {
    z-index: 2;
  }

//   canvas{
//     width: 100%;
//     height: 100%;
//   }
  </style>